<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>电商大数据管理平台</title>
    <link rel="icon" href="icon.ico">
    <link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="css/dashboard.css">
    <link rel="stylesheet" type="text/css" href="plugins/element-ui/theme-default/index.css"/>
    <link rel="stylesheet" href="js/umeditor1.2.3-utf8-jsp/themes/default/css/umeditor.css" />
    <!--[if lt IE 9]>
    <script src="plugins/html5shiv/html5shiv.min.js"></script>
    <script src="plugins/respond/respond.min.js"></script>
    <![endif]-->
</head>
<style>

</style>

<body>
<div id="app">
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                        aria-expanded="false"
                        aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#" style="font-size: x-large;"><strong><b>电商大数据管理平台</b> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                </strong></a>
            </div>
            <navbars :acv='bnav'></navbars>
        </div>
    </nav>

    <div class="container-fluid">
        <div class="row" id="show">
            <datanav :ds="newdpot"></datanav>
            <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
                <div>
                    <div class="row">
                        <div class="col-xs-8">
                            <h2 style="color: #0D81F5;"><b>季度分析报告</b></h2>
                        </div>
                    </div>


                    <!--开始-->
                    <div class="row placeholders alert alert-info" style="padding-top: 10px;padding-bottom: 10px;">
                        <div class="col-xs-12">

                            <!--<span>区域选择：</span>-->
                            <!--<el-select v-model="value" placeholder="市级" style="width:110px;">
                                <el-option v-for="item in options" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                            <el-select v-model="value2" placeholder="区县" style="width:110px;">
                                <el-option v-for="item in options2" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-->
                            <!--<span>时间选择：</span>
                            <el-select v-model="value3" placeholder="年度" style="width:110px;">
                                <el-option v-for="item in options3" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>

                            <el-select v-model="value4" placeholder="季度" style="width:110px;">
                                <el-option v-for="item in options4" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>-->

                            <div class="btn-group">
                                <button type="button" onclick="stamp()" value="打印报告">打印预览</button>
                            </div>
                        </div>
                    </div>
                    <div style="padding-left: 50px;padding-right: 50px;">
                        <h2 class="sub-header text-center">铜仁市电子商务发展分析报告</h2>
                        <p style="margin-bottom:40px">
                        <p><b>一、总体情况</b>（图文，样本为本季度汇总、上季度汇总数据、上年同期汇总数据）</p>
                        <p>
                            <!-- 加载编辑器的容器 -->
                            <script id="container1" style="width:100%;" name="content" type="text/plain" name="content"></script>
                        </p>
                        </br>

                    </div>
                    </br>
                    <button class="btn btn-lg btn-info btn-block" onclick="stamp()">生成报告预览</button>

                </div>
            </div>
            <!--结束-->
            <br/><br/><br/><br/>


        </div>

        <div id="dayin" style="padding-top: 100px;padding-bottom: 100px;display:none;">
            <p align="center">
                <button type="button" onclick="stamps()" value="打印报告">打印报告</button>
                <button type="button" onclick="stampss()" value="打印报告">取消</button>
            </p>
            <div id="dayins" style="padding-left: 100px;padding-right: 100px; ">
                <h2 style="text-align:center" class="sub-header text-center">铜仁市电子商务发展分析报告</h2>
                <p style="margin-bottom:40px">
                <p><b>一、总体情况</b></p>
                <p>
                <div id="cont1"></div>
                </p>
                </br>
            </div>
        </div>
    </div>
</div>

<div style="padding-top: 150px" class="modal fade" id="chartshow" tabindex="-1" data-backdrop="static" role="dialog"
     aria-labelledby="selectCateModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" style="width:980px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">插入图表</h4>
            </div>
            <div class="modal-body" style="width:980px;">
                  <div id="main1" style="height:300px;width:940px;margin:auto;"></div>
            </div>
            <div class="modal-footer">
                <button type="button" id="chartclose" class="btn btn-primary">确认</button>
            </div>
        </div>
    </div>
</div>




<script src="plugins/jquery/jquery.min.js"></script>
<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="js/ie10-viewport-bug-workaround.js"></script>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript" src="js/nav.js"></script>
<script src="plugins/element-ui/index.js"></script>

<script type="text/javascript" src="js/echarts.min.js"></script>

<!--<script src="umeditor1.2.3-utf8-jsp/third-party/jquery.min.js"></script>-->
<script src="js/umeditor1.2.3-utf8-jsp/third-party/template.min.js"></script>
<script src="js/umeditor1.2.3-utf8-jsp/umeditor.config.js"></script>
<script src="js/umeditor1.2.3-utf8-jsp/umeditor.js"></script>
<script src="js/umeditor1.2.3-utf8-jsp/lang/zh-cn/zh-cn.js"></script>

<!--<script src="js/ueditor-1.4.3.3/ueditor.config.js"></script>
<script src="js/ueditor-1.4.3.3/ueditor.all.js"></script>-->
<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>
<script src="js/common.js"></script>

<!-- plupload -->
<script src="js/plupload/crypto.js"></script>
<script src="js/plupload/hmac.js"></script>
<script src="js/plupload/sha1.js"></script>
<script src="js/plupload/base64.js"></script>
<script src="js/plupload/plupload.full.min.js"></script>
<script src="js/plupload/upload.js"></script>
<script>
    //模板
    var  txt = '<p style="text-align:center;"><strong  class="pid" style="font-family: &#39;microsoft yahei&#39;, simsun, helvetica, arial, sans-serif; line-height: 22.8571px; white-space: normal;">一、总体情况</strong>\
    </p><p><p class="t0"></p><img src="" style="width:50%" class="t1"><img src="" style="width:50%" class="t2"><img src="" style="width:50%" class="t3"></p><p>\
    <strong style="font-family: &#39;microsoft yahei&#39;, simsun, helvetica, arial, sans-serif; line-height: 22.8571px; white-space: normal;"><br/></strong>\
    </p><p>\
    <strong style="font-family: &#39;microsoft yahei&#39;, simsun, helvetica, arial, sans-serif; line-height: 22.8571px; white-space: normal;"></strong></p>\
    <p style="margin-top: 0px; margin-bottom: 10px; font-family: &#39;microsoft yahei&#39;, simsun, helvetica, arial, sans-serif; text-align:center;line-height: 22.8571px; white-space: normal;">\
    <strong>二、独立分析</strong>\
    </p>\
    <p style="margin-top: 0px; margin-bottom: 10px; font-family: &#39;microsoft yahei&#39;, simsun, helvetica, arial, sans-serif; line-height: 22.8571px; white-space: normal;">\
    （一）平台 </p><p>\
    <strong style="font-family: &#39;microsoft yahei&#39;, simsun, helvetica, arial, sans-serif; line-height: 22.8571px; white-space: normal;"><br/></strong>\
    </p>\
    <p>\
        <span style="font-family: &#39;microsoft yahei&#39;, simsun, helvetica, arial, sans-serif; line-height: 22.8571px; white-space: normal;">（二）产品</span><strong style="font-family: &#39;microsoft yahei&#39;, simsun, helvetica, arial, sans-serif; line-height: 22.8571px; white-space: normal;"><br/></strong><br/>\
        <img src="" style="width:80%" class="t9">\
    </p>\
    <p>\
        <span style="font-family: &#39;microsoft yahei&#39;, simsun, helvetica, arial, sans-serif; line-height: 22.8571px; white-space: normal;">（三）主体</span>\
    </p>\
    <p>\
        <span style="font-family: &#39;microsoft yahei&#39;, simsun, helvetica, arial, sans-serif; line-height: 22.8571px; white-space: normal;"><br/></span>\
    </p>\
    <p  style="text-align:center;">\
        <span style="font-family: &#39;microsoft yahei&#39;, simsun, helvetica, arial, sans-serif; line-height: 22.8571px; white-space: normal;"><strong style="font-family: &#39;microsoft yahei&#39;, simsun, helvetica, arial, sans-serif; line-height: 22.8571px; white-space: normal;">三、工作建议</strong></span>\
    </p>'

    //数据报告对象
    var dataTemplate = {
        "id": "",
        "generalSituation": "",//总体情况
        "platformStatistics": "",//平台统计
        "productAnalysis": "",//产品分析
        "subjectAnalysis": "",//主体分析
        "workProposal": "",//工作建议
        "quarter": ""//季度
    };

    var dataObj = dataTemplate;
    var ue1;
    var mstxt2;
    var mstxt;
    var chartdata = {
        xdata:['碧江区','大龙经济开发区','德江县','江口县','思南县','松桃县'],
        sname:"平台数量",
        lname:"贸易数量",
        sdata: [5020,4900,4523,3600,2003,1600],
        ldata: [5020,4900,4523,3600,2003,1600],
    }
    var datayears = GetQueryString("years");
    var datayquarter = GetQueryString("quarter");





    $(window).ready(function () {
        "use strict";
        var obj1 = document.getElementById("dayin");
        dataObj.quarter = GetQueryString('years') + "-"+ GetQueryString('quarter');//季度
        ueEditorInit();
        obj1.style.display = "none";
        loadDataReport();//加载当前季度的数据报告
    });


    var ajaxchart = {
        chart0:function() {
            $.ajax({
                    url: '/ebb/collectivity/all?year='+datayears+'&quarter='+datayquarter,
                    type: 'get',
                    success: function (result) {
                        var colAll = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;自平台上线以来，截止' + datayears + '年' + datayquarter * 3 + '月底，全市共计：' +
                            '电商平台 ' + result.ebbPlatformTotal +
                            ' 个（其中第三方 '+ result.thirdPartyPlatform +
                            ' 个、自建平台 '+ result.selfBuiltPlatform +
                            ' 个、电商综合服务站点 '+ result.comServicePlatform +
                            ' 个）；物流网点 '+ result.logisticsNetworkNode +
                            ' 个（其中发入量 '+ result.logisticsMonthIn +
                            ' 件，发出量 ' + result.logisticsMonthOut +
                            ' 件）；电商培训批次 '+result.trainBatch+
                            ' 次，共培训' + result.trainPeopleNum +
                            '人；通过电商平台销售的产品约'+ result.productNum + '个。';
                        mstxt2.find('.t0').html(colAll);
                        ue1.setContent(mstxt2.html());
                    }
                });
        },
        chart9:function() {
           var myobj = {
                title:'产品TOP10',
                xdata:[],
                sname:"交易量（万）",
                lname:"交易额（万元）",
                sdata: [],
                ldata:[]
            };
            var datas = [];
             $.ajax({
                    url: '/ebb/data/report/product/top/?year='+datayears+'&quarter='+datayquarter+'&topType=10',
                    type: 'get',
                    success: function (result) {
                      datas = result["2017-03"];
                      for(var i=0;i<datas.length;i++){
                         myobj.xdata.push(datas[i].productName)
                         myobj.sdata.push(parseInt(datas[i].businessVolume/10000))
                         myobj.ldata.push(parseInt(datas[i].tradingVolume/10000))
                      }
                    var imgurl = makechart(myobj);
                     mstxt2.find('.t9').attr('src',imgurl);
                     ue1.setContent(mstxt2.html());
                    }
                });
        },
        chart8:function() {
           var myobj = {
                title:'店铺TOP10',
                xdata:[],
                sname:"",
                lname:"店铺",
                sdata: [],
                ldata:[]
            };
            var datas = [];
             $.ajax({
                    url: '/ebb/data/report/product/top/?year='+datayears+'&quarter='+datayquarter+'&topType=10',
                    type: 'get',
                    success: function (result) {
                      datas = result["2017-03"];
                      for(var i=0;i<datas.length;i++){
                         myobj.xdata.push(datas[i].productName)
                         myobj.sdata.push(parseInt(datas[i].businessVolume/10000))
                         myobj.ldata.push(parseInt(datas[i].tradingVolume/10000))
                      }
                    var imgurl = makechart(myobj);
                     mstxt2.find('.t9').attr('src',imgurl);
                     ue1.setContent(mstxt2.html());
                    }
                });
        },
        chart1:function(){
            var myobj = {
                xdata:['电商综合服务平台数量','电商平台总数','发入量','发出量','物流网点','电商平台销售的产品','自建平台数量','第三方平台数量','培训批次','培训人数'],
                sname:"数量",
                lname:"",
                sdata: [],
                ldata:[]
            };
            var datas = {};
             $.ajax({
                    url: '/ebb/collectivity/all?year='+datayears+'&quarter='+datayquarter,
                    type: 'get',
                    success: function (result) {
                      datas = result;
                      for(var i in datas){
                        if(datas.hasOwnProperty(i)){
                            myobj.sdata.push(datas[i]);
                            }
                        }
                    var imgurl = makechart(myobj);
                     mstxt2.find('.t1').attr('src',imgurl);
                     ue1.setContent(mstxt2.html());
                    }
                });
        },
         chart2:function(){
            var myobj = {
                title:'电商平台类型及每个类型的交易情况',
                xdata:[],
                sname:"交易量",
                lname:"交易额",
                sdata: [],
                ldata:[]
            };
            var datas = [];
             $.ajax({
                    url: '/ebb/collectivity/ebbAnalysisByType?year='+datayears+'&quarter='+datayquarter,
                    type: 'get',
                    success: function (result) {
                      datas = result;
                      for(var i=0;i<datas.length;i++){
                         myobj.xdata.push(datas[i].type)
                         myobj.sdata.push(datas[i].businessVolume)
                         myobj.ldata.push(datas[i].tradingVolume)
                      }
                    var imgurl = makechart(myobj);
                     mstxt2.find('.t2').attr('src',imgurl);
                     ue1.setContent(mstxt2.html());
                    }
                });
        },
         chart3:function(){
              var myobj = {
                title:'电商平每一季度及其中每月的交易情况',
                xdata:[],
                sname:"交易量",
                lname:"交易额",
                sdata: [],
                ldata:[]
            };
            var datas = [];
             $.ajax({
                    url: '/ebb/collectivity/ebbMonthAndQuarterDataAnalysis?year='+datayears+'&quarter='+datayquarter,
                    type: 'get',
                    success: function (result) {
                      datas = result;
                      for(var i=0;i<datas.length;i++){
                         myobj.xdata.push(datas[i].type)
                         myobj.sdata.push(datas[i].businessVolume)
                         myobj.ldata.push(datas[i].tradingVolume)
                      }
                      var imgurl = makechart(myobj);
                     mstxt2.find('.t3').attr('src',imgurl);
                     ue1.setContent(mstxt2.html());
                    }
                });
        },
         chart4:function(){
              var myobj = {
                title:'店铺top分析统计信息',
                xdata:[],
                sname:"交易量",
                lname:"交易额",
                sdata: [],
                ldata:[]
            };
            var datas = [];
             $.ajax({
                    url: '/ebb/collectivity/ebbMonthAndQuarterDataAnalysis?year='+datayears+'&quarter='+datayquarter,
                    type: 'get',
                    success: function (result) {
                      datas = result;
                      for(var i=0;i<datas.length;i++){
                         myobj.xdata.push(datas[i].type)
                         myobj.sdata.push(datas[i].businessVolume)
                         myobj.ldata.push(datas[i].tradingVolume)
                      }
                      chartdata = myobj;
                      makechart();
                    }
                });
        },
         chart5:function(){
            var datas = {};
             $.ajax({
                    url: '/ebb/collectivity/all?year='+datayears+'&quarter='+datayquarter,
                    type: 'get',
                    success: function (result) {
                      console.log(result);
                      datas = result;
                    }
                });
            return datas;
        },
         chart6:function(){
            var datas = {};
             $.ajax({
                    url: '/ebb/collectivity/all?year='+datayears+'&quarter='+datayquarter,
                    type: 'get',
                    success: function (result) {
                      console.log(result);
                      datas = result;
                    }
                });
            return datas;
        },
    }

    //图表生成图片
    function makechart(chartdatas){
        var imgbase64 = "";
        var option = {
				tooltip: {
					trigger: 'axis'
				},
				xAxis: [
					{
						type: 'category',
						data: chartdatas.xdata,
						axisLabel: {
							interval: 0,
							rotate: 20 //-30度角倾斜显示
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: '#dddddd',
								type: 'dashed',
								width: 1
							}
						},
						splitArea: {
							show: true,
							areaStyle: {
								color: ['rgba(144,238,144,0.05)', 'rgba(135,200,250,0.05)']
							}
						},
						axisTick: {
							alignWithLabel: true
						}
					}
				],
				yAxis: [
					{
						type: 'value',
						name: chartdatas.sname,
						axisLabel: {
							formatter: '{value} '
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: '#dddfff',
								type: 'dotted',
								width: 1
							}
						},
						splitArea: {
							show: true,
							areaStyle: {
								color: ['rgba(205,92,92,0.05)', 'rgba(255,215,0,0.05)']
							}
						}
					},
                    {
						type: 'value',
						name: chartdatas.lname,
						axisLabel: {
							formatter: '{value} '
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: '#dddfff',
								type: 'dotted',
								width: 1
							}
						},
						splitArea: {
							show: true,
							areaStyle: {
								color: ['rgba(205,92,92,0.05)', 'rgba(255,215,0,0.05)']
							}
						}
					}
				],
				series: [
					{
						name: chartdatas.sname,
						type: 'bar',
						data: chartdatas.sdata,
						label: {
							normal: {
								show: true,
								position: 'top',
								textStyle:{
									color:'#323232',
									fontSize:14
								}
							}
						},
					},
                    {
						name: chartdatas.lname,
						type: 'bar',
						data: chartdatas.ldata,
                        yAxisIndex: 1,
                        label: {
							normal: {
								show: true,
								position: 'top',
								textStyle:{
									color:'#323232',
									fontSize:14
								}
							}
						},
					}
				]
			};
				var myChart = echarts.init(document.getElementById('main1'));
				myChart.setOption(option);

				imgbase64 = myChart.getDataURL("png");

                return imgbase64
    }

    function allchartshow(){
         ajaxchart.chart0();
         ajaxchart.chart1();
         ajaxchart.chart2();
         ajaxchart.chart3();
         ajaxchart.chart9();
    }

    //百度编辑器
    function ueEditorInit() {
    		window.UMEDITOR_CONFIG.toolbar = [
            // 加入一个 myinput
            ' source | undo redo | bold italic underline strikethrough  forecolor backcolor | removeformat |',
            '| justifyleft justifycenter justifyright justifyjustify |',
            'link unlink | emotion image video | map',
            '| fullscreen'
        ];

        ue1 = UM.getEditor('container1');
        ue1.ready(function(){
            ue1.setContent(txt);
        });

    }



</script>
<script>

    function stamp() {
        //获取数据报告的内容
        var sText = ue1.getContent();
        document.getElementById("cont1").innerHTML = sText;

        sText = '<div class="mybody">'+sText+'</div>'
        var sText1 = $(sText);
        sText1.find('img').attr('src','');
        //设置数据报告对象
        dataObj.generalSituation = sText1.html();

        //保存数据报告
        saveDataReport();


        var obj = document.getElementById("show");
        obj.style.display = "none";
        var obj1 = document.getElementById("dayin");
        obj1.style.display = "block";
    }
    function stamps() {
        var newstr = document.getElementById("dayins").innerHTML;
        var oldstr = document.body.innerHTML;   //保存原先网页的代码
        document.body.innerHTML = newstr; //将网页内容更改成需要打印
        window.print();
        document.body.innerHTML = oldstr;
    }
    function stampss() {
        var obj = document.getElementById("show");
        obj.style.display = "block";
        var obj1 = document.getElementById("dayin");
        obj1.style.display = "none";
    }
    //查询数据报告
    function loadDataReport() {
        $.ajax({
            url: '/ebb/datareport/',
            type: 'get',
            data: {'index': 1, 'size': 10, 'quarter': dataObj.quarter},
            success: function (result) {
                     //设置数据报告对象
                dataObj = result.data.length > 0 ? result.data[0] : dataTemplate;
                //总体情况
                if(result.data.length >0){
                     //ue1.setContent(dataObj.generalSituation);
                }
                   mstxt = ue1.getContent();
                   mstxt = '<div class="mybody">'+mstxt+'</div>'
                   mstxt2 = $(mstxt);
                   allchartshow();

            }
        });
    }
    //保存数据报告
    function saveDataReport() {
        if (!dataObj.id) {//如果ID为空，新增
            $.ajax({
                url: '/ebb/datareport/',
                type: 'post',
                data: JSON.stringify(dataObj),
                contentType: "application/json",
                success: function (result) {
                    console.log("报表生成成功！");
                }
            });
        } else {//否则，更新
            $.ajax({
                url: '/ebb/datareport/',
                type: 'put',
                data: JSON.stringify(dataObj),
                contentType: "application/json",
                success: function (result) {
                    console.log("报表生成成功！");
                }
            });
        }

    }
    new Vue({
        el: "#app",
        data: {
            bnav: {
                number: 4,
            },
            newdpot: GetQueryString('years') + "第"+ GetQueryString('quarter') + "季度",
            options:[
                {value: '1',label: '图表1'}, {value: '2',label: '图表2'},{value: '3',label: '图表3'},{value: '4',label: '图表4'},
                {value: '5',label: '图表5'}, {value: '6',label: '图表6'},{value: '7',label: '图表7'},{value: '8',label: '图表8'},
                {value: '9',label: '图表9'}, {value: '10',label: '图表10'}
            ],
            options3: [{
                value: '2017',
                label: '2017'
            }, {
                value: '2016',
                label: '2016'
            }],
            options4: [{
                value: '1',
                label: '第一季度'
            }, {
                value: '2',
                label: '第二季度'
            }, {
                value: '3',
                label: '第三季度'
            }, {
                value: '4',
                label: '第四季度'
            }],
            value:1,
            value3: '2017',
            value4: '1',
        },
        computed: {},
        mounted: function () {

        },
        methods: {

        },
        watch: {

        }
    });

</script>
</body>

</html>